//   配置请求参数
var HTTP_URL = {
  dev: {
    upload_uri: 'http://dev.upload.mayiweb.com',
    data_api_uri: 'http://dev.api.data.mayiweb.com'
  },
  server: {
    upload_uri: 'https://upload.mayiweb.com',
    data_api_uri: 'https://api.data.mayiweb.com'
  }
}

var nav = (function() {

  // 菜单切换
  var change = function() {
    var topMenuIco = document.querySelector('.top-menu-ico');
    var menu = document.querySelector('.top-menu');

    var toggleMenu = function() {
      this.classList.toggle('open');
      menu.classList.toggle('open');
    }

    topMenuIco.addEventListener('click', toggleMenu)
  }


  // 当前页高亮设置
  var href = location.href;
  var navItems = null;
  var navItemsLink = null;
 
  if ( document.querySelector('.top-menu') ) {
    navItems = document.querySelectorAll('.top-menu li');
    navItemsLink = document.querySelectorAll('.top-menu a');
  } else {
    navItems = document.querySelectorAll('.nav li');
    navItemsLink = document.querySelectorAll('.nav a');
  }

  for (var i = 0, len = navItemsLink.length; i < len; i++) {
    var keyWord = navItemsLink[i].getAttribute('href').split('.')[0];

    if (href.indexOf(keyWord) != -1) {
      navItems[i].classList.add('cur');
    } else if (href.indexOf('html') === -1 ) {
      navItems[0].classList.add('cur');
    } else {
      navItems[i].classList.remove('cur');
    }
  }


  if ( href.indexOf('/m/') != -1 ) {
    change();
  }

})()

var ani = (function() {
  var aniList = [
    document.querySelector('.top'),
    //document.querySelector('.foot'),
  ]

  ScrollReveal().reveal(aniList, {
    during: 300,
    easing: 'ease',
    reset: true,
  })
})()

var createList = function(el, callback) {
  new Vue({
    el: el,
    data () {
      return {
        uploadUrl: HTTP_URL.server.upload_uri,
        params: {
          projectId: 1,
          templateId: 1,
          c_1:  location.hash.substring(1) || 'web',
          pageNum: 1,
          pageSize: 6,
          pageLastId: 0,
          sort: "{c_6: -1}"
        },
        list: [],
        total: 0,
        typeList: [],
        isAddScript: true,
        pageID: [],
        hideNextPage: true,
        hidePrevPage: true,
        requestOnce: true,
      }
    },
    methods: {
      /**
       *  上一页
       */
      prevPage () {
        if (this.params.pageNum > 1) {
          this.$set(this.params, 'pageNum', this.params.pageNum-1);
          this.params.pageLastId = this.pageID[this.params.pageNum-1];
          this.getList();
        }
      },
      /**
       *  下一页
       */
      nextPage () {
        if (Math.ceil(this.total/this.params.pageSize) >= this.params.pageNum) {
          this.$set(this.params, 'pageNum', this.params.pageNum+1);
          this.params.pageLastId = this.list[this.list.length-1]._id
          this.getList();
        }
      },

      /**
       *  切换分类数据
       * @param {Object} item  分类项
       */
      queryTypeData (item) {
        this.list = [];
        $('.examples-loading').removeClass('show');
        $('.examples-nomore').removeClass('show');
        this.requestOnce = true;
        this.$set(this.params, 'c_1', item.optionValue);
        this.params.pageNum = 1;
        this.getList();
      },
      /**
       *  获取分类
       */
      getDict () {
        $.ajax({
          url:HTTP_URL.server.data_api_uri + '/v1/data/dict/option/list/all',
          type: 'get',
          data: {
            projectId: this.params.projectId,
            dictKey: 'product_type'
          }
        })
        .then(res => {
          if (res && res.data) {
            this.typeList = res.data.reverse();
          }
        })
      },
      /**
       *  获取分类数据
       */
      getList () {

        var This = this;

        $.ajax({
          url: HTTP_URL.server.data_api_uri + '/v1/data/list',
          type: 'get',
          data: this.params
        })
        .then(res => {

          if (res.data.page.data.length) {

            this.total = res.data.page.total;
            
            this.list = this.list.concat(res.data.page.data);

            this.pageID[this.params.pageNum - 1] = this.params.pageLastId;

            this.requestOnce = true;

            if ( this.params.pageNum *  this.params.pageSize >=  this.total) {
              $('.examples-loading').removeClass('show');
              $('.examples-nomore').addClass('show');
              this.requestOnce = false;
            }

          }
        })
      },

      loadData() {
        var This = this;

        var pathname = location.pathname;

        if (pathname === '/m/' || pathname === '/m/index.html' || pathname === '/wechat/' || pathname === '/wechat/index.html') {
          return;
        }

        var debounce = function(method,delay){
          var timer=null;
            return function(){
              var context=this, args=arguments;
              clearTimeout(timer);
              timer=setTimeout(function(){
              method.apply(context,args);
            },delay);
          }
        }

        var scroll = function() {

          if ( $('.examples-list').offset().top + $('.examples-list').height() + $(window).scrollTop() >= $(window).height() && This.requestOnce) {

            This.requestOnce = false;

            $('.examples-loading').addClass('show');

            This.$set(This.params, 'pageNum', ++This.params.pageNum);

            This.params.pageLastId = This.list[This.list.length-1]._id

            This.getList();
          }
        }

        $(window).on('scroll', debounce(scroll, 300))
      },

      openBigImg(index, item) {
        $('.top').addClass('hide');
        $('.nav').addClass('hide');

        var aSrc = $('.examples-list li').eq(index).attr('data-src').split(',');
        var This = this;
        var curPage = 1;
        var allPage = aSrc.length;

        $('.dia-container p').text(curPage + '/' + allPage);

        $(aSrc).each(function(i, v) {

          var src = This.uploadUrl + v;
          $('.dia-container-list').append('<li class="swiper-slide"><img class="swiper-lazy" data-src="" alt=""><div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div></li>')
          $('.dia-container-list li').eq(i).find('img').attr('data-src', src);
        })

        new Swiper('.dia-container', {
          observer:true,
          observeParents:true,
          autoHeight: true,
          setWrapperSize: true,
          lazyLoading: true,
          updateOnImagesReady: true,
          onSlideChangeEnd: function(sw) {
            curPage = sw.realIndex + 1;
            allPage = sw.slides.length;
            $('.dia-container p').text(curPage + '/' + allPage);
          }
        })

        $('.dia').addClass('show');

      },

      closeBigImg() {
        $('.dia-container').scrollTop(0)
        $('.dia').removeClass('show');
        $('.top').removeClass('hide');
        $('.nav').removeClass('hide');
        $('.dia-container-list').html('');
        $('.dia-container p').text();
      },
    },
    created () {
      this.getDict();
      this.getList();
      this.loadData();
    },
    mounted() {
      if ( callback ) {
        callback();
        setTimeout(function() {
          $('.product-list').css({
            'transform': 'translate3d(0px, 0px, 0px)'
          })
        }, 0)
        
      }
    }
  })
}